<template>
    <div class="new-box">
        <div class="mid-width">
            <el-row>
                <el-carousel class="verbox" height="41px" direction="vertical" :autoplay="true" indicator-position="none">
                    <el-carousel-item v-for="(item, index) in noticeTop" :key="index">
                        <router-link tag="a" :to="{path:'/detail/',query:{'featureId':item.newId}}" >
                            <h3 class="medium">&nbsp;&nbsp;<i class="el-icon-caret-left"></i>&nbsp;&nbsp;<small>通知公告：</small>&nbsp;&nbsp;{{ item.title }}</h3>
                        </router-link>
                    </el-carousel-item>
                </el-carousel>
            </el-row>

            <el-row><h3>&nbsp;</h3></el-row>

            <el-row :gutter="20">
                <el-col :span="12">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span><i class="el-icon-collection-tag"></i>&nbsp;&nbsp;政策法规</span>
                            <el-button style="float: right; padding: 3px 0; color: #009688" type="text">更多 &nbsp;&nbsp;<i class="el-icon-plus"></i></el-button>
                        </div>
                        <div v-for="(item, index) in policy" :key="index" class="text item" v-if="index<=3">
                            <router-link tag="a" :to="{path:'/detail/',query:{'typeId':item.typeId, 'newsId':item.newsId}}" >
                                <i class="el-icon-arrow-right"></i>&nbsp;&nbsp;{{item.title}}
                            </router-link>
                        </div>
                    </el-card>
                </el-col>

                <el-col :span="12">
                    <el-carousel height="272px">
                        <el-carousel-item v-for="(item, index) in pushNews" :key="index" v-if="index<=2">
                            <img class="img-src" :src="item.imgSrc">
                        </el-carousel-item>
                    </el-carousel>
                </el-col>
            </el-row>

            <el-row><h3>&nbsp;</h3></el-row>

            <el-row>
                <el-image :src="src">
                    <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                    </div>
                </el-image>
            </el-row>

            <el-row><h3>&nbsp;</h3></el-row>

            <el-row>
                <el-tabs type="border-card">
                    <el-tab-pane label="土地信息">
                        <ul class="list-tab">
                            <li v-for="(item, index) in landList" :key="index" v-if="index<=8">
                                <router-link tag="a" :to="{path:'/detail/',query:{'typeId':item.typeId, 'newsId':item.newsId}}" >
                                    <i class="el-icon-arrow-right"></i>&nbsp;&nbsp;{{item.title}}
                                </router-link>
                            </li>
                        </ul>
                    </el-tab-pane>
                    <el-tab-pane label="文件下载">
                        <ul class="list-tab">
                            <li v-for="(item, index) in downlist" :key="index" v-if="index<=8">
                                <router-link tag="a" :to="{path:'/detail/',query:{'typeId':item.typeId, 'newsId':item.newsId}}" >
                                    <i class="el-icon-arrow-right"></i>&nbsp;&nbsp;{{item.title}}
                                </router-link>
                            </li>
                        </ul>
                    </el-tab-pane>
                </el-tabs>
            </el-row>
        </div>

    </div>
</template>

<script>

    import {apiData} from '../interface/api';
    export default {
        name: "new-box",
        data() {
            return {
                src: 'http://114.116.154.42:8088/img/picUrl/show.png',
                pushNews:[
                    {
                        id:0,
                        imgSrc:"http://114.116.154.42:8088/img/picUrl/banner3.png",
                        istop:true
                    },
                    {
                        id:1,
                        imgSrc:"http://114.116.154.42:8088/img/picUrl/banner2.png",
                        istop:true
                    },
                    {
                        id:1,
                        imgSrc:"http://114.116.154.42:8088/img/picUrl/banner1.png",
                        istop:true
                    }
                ],
                policy:[],
                landList:[],
                downlist:[],
                noticeTop:[]
            }
        },
        methods:{
            async newList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                if(res.data.code==200){
                    // console.log(res)
                    this.policy = res.data.list
                }
            },
            async landsList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                if(res.data.code==200){
                    console.log(res)
                    this.landList = res.data.list
                }
            },
            async downloadList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                if(res.data.code==200){
                    console.log(res)
                    this.downlist = res.data.list
                }
            },
            async noticeList(method, url, obj){
                const res = await apiData.policyList(method, url, obj)
                if(res.data.code==200){
                    console.log(res)
                    this.noticeTop = res.data.list
                }
            }
        },
        mounted() {
            this.newList("post", "/web/newsList?pageNum=1&pageSize=100", {typeId:1})
            this.landsList("post", "/web/landList?pageNum=1&pageSize=100", {})
            this.downloadList("post", "/web/newsList?pageNum=1&pageSize=100", {typeId:2})
            this.noticeList("post", "/web/newsList?pageNum=1&pageSize=100", {typeId:0})
        }
    }
</script>

<style lang="less" scoped>
    .new-box {
        div {
            a{
                color: #3c3c3c;
                text-decoration: none;
                &:hover{
                    color: #009688;
                }
            }
            .el-carousel__item h3 {
                color: #475669;
                font-size: 18px;
                opacity: 0.75;

                margin: 0;
                &:nth-child(2n) {
                    background-color: #99a9bf;
                }
                &:nth-child(2n+1) {
                    border:1px solid #d3dce6;
                }
                &:nth-child(1) {
                    line-height: 38px;
                }
            }
            .text {
                font-size: 14px;
            }

            .item {
                line-height: 25px;
                margin-bottom: 18px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }

            .img-src{
                /*max-width: unset;*/
            }

            .clearfix:before,
            .clearfix:after {
                display: table;
                content: "";
            }
            .clearfix:after {
                clear: both
            }

            .box-card {
                width: 100%;
            }

        }

        ul {
           &.list-tab{
               display: flex;
               flex-direction: column;
               flex-wrap: wrap;
               height: 120px;
               li{
                   width: 30%;
                   line-height: 40px;
                   overflow: hidden;
                   text-overflow:ellipsis;
                   white-space: nowrap;
               }
           }
        }
    }
</style>